import Taro, { Component } from '@tarojs/taro'
import { View, Text, Image, Video } from '@tarojs/components'
import { AtButton, AtDivider, AtTag, AtAvatar } from 'taro-ui'
import './aiyanPolularVideo.scss'
import bighand from '../../../../img/bighand.png'
import right from '../../../../img/right.png'
import star from '../../../../img/star.png'
import app from '../../../../main.js'


export default class AiyanPolularVideo extends Component {

    config = {
        navigationBarTitleText: '爱眼科普'
    }
    constructor() {
        super(...arguments)
        this.state = {
            // 视频大小
            videoStyle:{height:'200px;',width:'345px;'},
            // 视频数据
            videoInfo:
            {
                "id":"1",
                "title":" 糖尿病视网膜病变分期",
                "image":"https://drive.wps.cn/view/l/sa3ZXvV5L",
                "path":"https://drive.wps.cn/view/l/sa3ZXvV5L",
                "content":null,
                "doctor_id":"0",
                "head_image":null,
                "doctor_name":"黄医生",
                "hospital":"广州眼科医院",
                "positional":"副主任",
                "created_at":"0000-00-00 00:00:00",
                "pageview":"0",
                "likeNumber":null
            },
            //相关医生数据
            docInfo: [
                {
                    "id":"1",
                    "name":"测试医生",
                    "head_image":"http://wx.qlogo.cn/mmopen/vi_32/Q0j4TwGTfTIjJwaevDnZ1wNB6MRLicmBRgnWVvRpalJFMPMLzOHribyM3dDY5vI5ljGHZLVVe7AnUicib2UKSD4ickw/132",
                    "hospital":"中山眼科医院",
                    "positional_title":"主任医师",
                    "speciality":null,
                    "labels":[
                        "白内障专家",
                        "爱眼力荐",
                        "爱眼力荐",
                        "平均响应:12分钟"
                    ],
                    "general_score":"0.0",
                    "response_time":"12",
                    "grade":"三甲"
                }
            ],
            //科普数据
            kepuArr: [
                {
                    "id":"1",
                    "title":" 糖尿病视网膜病变分期",
                    "image":"",
                    "doctor_id":"0",
                    "head_image":null,
                    "doctor_name":"黄医生",
                    "hospital":"广州眼科医院",
                    "positional_title":"副主任"
                }
            ],
            // 点赞数
            zan:0
        }
    }
    // 返回首页
    gotohomePage() {
        app.redirectTo('../eyeDoctor/eyeDoctor')
    }
    // 跳转到科普内容
    gotoaiyanPolular() {
        app.navigateTo('../aiyanPolular/aiyanPolular')
    }
    // 跳转到找医生
    gotofindDoctor() {
        let name = this.state.videoInfo.hospital
        app.navigateTo('../findDoctor/findDoctor'+'?name='+name)
    }
    // 跳转到该医生首页
    gotodoctorindex() {
        app.navigateTo('../doctorindex/doctorindex')
    }
    // 分享

    onShareAppMessage(res) {
        if (res.from === 'button') {
          // 来自页面内转发按钮
          console.log(res.target)
        }
        return {
          title: '自定义转发标题',
          path: res.webViewUrl,
          imageUrl:"https://zhongsheng.bayou-tech.cn/img/touxiang3.png"
        }
    }
    //全屏 未实现
    fullandexit(event){
       
    }
    // 点赞
    dianzan(pid){
        console.log(pid)
        let me = this
        let data = {video_recommends_id:pid}
        app.post('video_recommends/videoLike',data,(res)=>{
            me.setState({
                zan:res.data.result.likeNum
            })
        })
    }
   

    // 获取数据
    getDate() {
        let me = this
        let data = {video_recommends_id: this.$router.params.kepuid}
        // 获取视频信息 
        app.post('video_recommends/videoDetail', data, function (res) {
            me.setState({
                videoInfo: res.data.result
            })
        })
        // 获取相关医生信息
        let data2 = {offset:0,length:4,search_value:me.state.videoInfo.hospital}
        app.post('web/members/doctorList', data2, function (res) {
            me.setState({
                docInfo: res.data.result.list
            })
        })
        // 获取科普信息
        let data3 = {offset:0,length:4,doctor_id:me.state.videoInfo.doctor_id}
        app.post('video_recommends/videoList', data3, function (res) {
            me.setState({
                kepuArr: res.data.result.list
            })
        })
        // 获取点赞数
        let data4 = {video_recommends_id:me.state.videoInfo.id}
        app.post('video_recommends/videoLike',data4,(res)=>{
            me.setState({
                zan:res.data.result.likeNumber
            })
        })
    }
    componentDidMount() {
        this.getDate();
    }
    render() {
        // 相关医生数据
        let infoList = this.state.docInfo.map((item) => {
            return <View className='docInfo' onClick={this.gotodoctorindex}>
                <View>
                    <Image
                        className='avider'
                        src={item.head_image}
                    />
                </View>
                <View className='infoText'>
                    <View className='textTile'>
                        <View>
                            <Text className='name'>{item.name}</Text>
                            <Text className='t'>{item.positional_title}</Text>
                        </View>
                        <View>
                            <Image className='starStyle' src={star} />
                            <Text className='tn'>{item.general_score}</Text>
                        </View>
                    </View>
                    <View ><Text>{item.hospital}</Text></View>
                    <View>
                        <Text>擅长：{item.speciality}</Text>
                    </View>
                    <View className='infoTag'>
                    {/*相关医生标签数据 */}                     
                    {item.labels.map((item2) => {
                        return <View>
                                    <AtTag className='tag' circle>
                                        {item2}
                                    </AtTag>
                                </View>
                    }) }
                    </View>
                </View>
            </View>
        })
        // 相关科普数据
        let viewList = this.state.kepuArr.map((item) => {
            return <View className='topInfo2'>
                {/* 科普内容 */}
                <View className='infoImage2'>
                    <Image
                        className='imageStyle2'
                        src={item.image} />
                </View>
                <View className='infoText2'>
                    <View className='textSymptom2'>
                        {item.title}
                    </View>
                    {/* 科普医生内容 */}
                    <View className="textDocInfo2">
                        <View>
                            <Image
                                className='touxiang2'
                                src={item.head_image} />
                        </View>
                        <View className='docInfo2'>
                            <View>{item.doctor_name} <Text>{item.positional_title}</Text></View>
                            <View>{item.hospital}</View>
                        </View>
                    </View>
                </View>
            </View>
        })
        // 视频数据
        let videoInfo = this.state.videoInfo
        return (
            <View>
                <View className='topInfo'>
                    {/* 顶部标题信息 */}
                    <View className='infoText'>
                        <View className='textSymptom'>
                            {videoInfo.title}
                        </View>
                        <View className="textDocInfo">
                            <View className='docInfoLeft'>
                                <View>
                                    <Image
                                        className='touxiang'
                                        src={videoInfo.head_image}
                                    />
                                </View>
                                <View className='docInfo3'>
                                    <View>{videoInfo.doctor_name}  {videoInfo.positional_title}</View>
                                    <View>{videoInfo.hospital}</View>
                                </View>
                            </View>
                            <View className='docInfoRight'>
                                <View>
                                    {videoInfo.created_at}
                                </View>
                                <View>
                                    阅读：  {videoInfo.pageview}次
                                </View>
                            </View>
                        </View>
                    </View>
                    {/* 视频信息 */}
                    <View className='topVideo'>
                        <Video
                            style={this.state.videoStyle}
                            // src={videoInfo.videosrc}
                            src='http://wxsnsdy.tc.qq.com/105/20210/snsdyvideodownload?filekey=30280201010421301f0201690402534804102ca905ce620b1241b726bc41dcff44e00204012882540400&bizid=1023&hy=SH&fileparam=302c020101042530230204136ffd93020457e3c4ff02024ef202031e8d7f02030f42400204045a320a0201000400'
                            controls={true}
                            autoplay={false}
                            // poster={videoInfo.image}
                            initialTime='0'
                            direction='90'
                            id='video'
                            objectFit='cover'
                            loop={false}
                            muted={false}
                            onFullscreenChange={this.fullandexit.bind(this)}
                        />
                    </View>
                    <View className='topText'>
                        <Text>
                            {videoInfo.content}
                        </Text>
                    </View>
                    <View>
                        <AtButton className='topBtn' onClick={this.dianzan.bind(this,videoInfo.id)}>
                        <Image className='btnImage' src={bighand} /> 
                        {this.state.zan}  有用
                        </AtButton>
                    </View>
                </View>
                <View className='centerInfo'>
                    {/* 相关医生 */}
                    <View className='centerTitle'>
                        <View>可质询相关医生</View>
                        <View onClick={this.gotofindDoctor}>更多<Image className='rightIamge' src={right} /></View>
                    </View>
                    <View>
                        {infoList}
                    </View>
                </View>
                {/* 相关科普 */}
                <View className='bottonInfo'>
                    <View className='bottonTitle'>
                        <View>相关科普</View>
                        <View onClick={this.gotoaiyanPolular}>更多<Image className='rightIamge' src={right} /></View>
                    </View>
                    {viewList}
                    {/* 底部按钮 */}
                    <View className='bottomBtn2'>
                        <View className='leftBtn' onClick={this.gotohomePage}>
                            <Text>回首页</Text>
                        </View>
                        <View className='rightBtn'>
                        <AtButton  openType='share' className='rightBtnbtn'>
                        {/* onClick={this.onShareAppMessage.bind(this)} */}
                            分享
                        </AtButton>
                        </View>
                    </View>
                </View>
            </View>
        )
    }
}